<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/start' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a>用户</a></el-breadcrumb-item>
        <el-breadcrumb-item>用户操作</el-breadcrumb-item>
      </el-breadcrumb>
      <el-table
        height="550"
        stripe
        :data="tableData"
        style="width: 100%; margintop: 20px;min-width:900px"
      >
      <el-table-column type="expand">
      <template slot-scope="props">
        <say :username="props.row.username"></say>
      </template>
    </el-table-column>
        <el-table-column
          v-for="item in tableItem"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot="header">
            <el-input
              clearable
              v-if="item.prop === 'option'"
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
              @input="searchFilter"
            />
            <span v-if="item.prop != 'option'">{{ item.prop }}</span>
          </template>
          <template slot-scope="scope">
            <span v-if="item.prop !== 'avatar' && item.prop !== 'time'">{{
              scope.row[item.prop]
            }}</span>
            <span v-if="item.prop === 'time'">{{
              scope.row[item.prop] | formatTime
            }}</span>
            <img
              class="userAvatar"
              :src="scope.row[item.prop]"
              alt=""
              v-if="item.prop === 'avatar'"
            />
            <el-button v-if="item.prop === 'option'" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              v-if="item.prop === 'option'"
              @click="del(scope.row.username)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <div style="textalign: center">
          <span style="color: red; fontsize: 18px">确定删除?(不可改变)</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="startDel">确 定</el-button>
        </span>
      </el-dialog>
      <el-card shadow="always" class="card" v-if="showCard">
        <el-form ref="form" label-width="40px">
          <p>id: {{ id }}</p>
          <p>time: {{time | formatTime}}</p>
          <el-form-item label="权限">
            <el-radio-group v-model="status" @change="changeStatus">
              <el-radio :label=1>1</el-radio>
              <el-radio :label=2>2</el-radio>
              <el-radio :label=3>3</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="头像" class="avatarItem">
            <img :src="avatar" alt="" /> <el-button @click="changeAvatar">修改头像</el-button> 
          </el-form-item>
          <el-form-item label="昵称">
            <el-input
              v-model="realname"
              clearable
              placeholder="昵称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :disabled="ifUse||loading" :loading="loading">修改完成</el-button>
            <el-button @click="cancelEdit">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
interface row {
  rowIndex: number;
}
interface userInfo {
  id: number;
  avatar?: string;
  username?: string;
  realname?: string;
  time?: string;
  status?: number;
}
import { Component, Vue } from "vue-property-decorator";
import format from "../formatTime";
import say from "./say.vue"
@Component({
  filters: {
    formatTime: (val: string) => {
      return format(val);
    },
  },
  components:{
    say
  }
})
export default class user extends Vue {
  private tableData: Array<any> = [];
  private tableDataAll: Array<any> = [];
  private centerDialogVisible: boolean = false;
  private tableItem: Array<object> = [
    { id: "0", prop: "id", label: "id" ,width:"40"},
    { id: "1", prop: "avatar", label: "头像",width:"80" },
    { id: "2", prop: "username", label: "用户名" },
    { id: "3", prop: "realname", label: "昵称" },
    { id: "4", prop: "time", label: "创建时间" },
    { id: "6", prop: "status", label: "权限",width:"70" },
    { id: "5", prop: "option", label: "操作",width:"220" },
  ];
  private search: string = "";
  private currentDelItem: string = "";
  private id: number | string = 0;
  private username: string = "";
  private realname: string = "";
  private time: string = "";
  private status: number | string = 0;
  private showCard: boolean = false;
  private avatar: string = "";
  private imageUrl: string = "";
  private loading:boolean = false;
  created() {
    this.getUserList();
  }
  get ifUse(){
    return this.status&&this.realname&&this.avatar?false:true
  }
  changeAvatar():void{
    this.avatar = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
  }
  edit(val: userInfo): void {
    this.showCard = true;
    this.id = val.id ? val.id : "暂无数据";
    this.avatar = val.avatar ? val.avatar : "暂无数据";
    this.status = val.status ? val.status : "暂无数据";
    this.username = val.username ? val.username : "暂无数据";
    this.realname = val.realname ? val.realname : "暂无数据";
    this.time = val.time ? val.time : "暂无数据";
  }
  del(op: string): void {
    this.centerDialogVisible = true;
    this.currentDelItem = op;
  }
  onSubmit(): void {
    this.loading = true
    this.$axios.post("/user/update",{
      status:this.status,
      avatar:this.avatar,
      realname:this.realname,
      username:this.username
    }).then(res=>{
      if(res.data.error===-1){
        this.$message({
          type:"success",
          message:"更新成功"
        })
        this.showCard = false
        this.getUserList()
        this.loading = false
      }else{
        (<any>this).$message({
          type:"error",
          message:"更新失败,"
        })
        this.showCard = false
        this.loading = false
      }
    })
  }
  changeStatus() {
    console.log(this.status);
  }
  cancelEdit(): void {
    this.showCard = false;
  }
  startDel(): void {
    this.$axios
      .post("/user/del", {
        username: this.currentDelItem,
        status: this.$store.state.user.userInfo.status,
      })
      .then((res) => {
        console.log(res);
        this.centerDialogVisible = false;
        if (res.data.error === -1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getUserList();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
  }
  searchFilter() {
    if (this.search !== "") {
      this.$axios
        .get("/user/searchFilter", {
          params: {
            username: this.search,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.tableData = res.data.data;
          } else {
            this.tableData = [];
          }
        });
    } else {
      this.tableData = this.tableDataAll;
    }
  }
  getUserList() {
    this.$axios
      .get("/user/search", {
        params: {
          status: this.$store.state.user.userInfo.status,
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.error === -1) {
          this.tableData = res.data.data;
          this.tableDataAll = res.data.data;
          this.$message({
            type: "success",
            message: "拉取数据成功",
          });
        } else {
          this.$message({
            type: "error",
            message: "拉取数据失败",
          });
        }
      });
  }
}
</script>

<style lang="less" scoped>
@import url("../assets/css/less.less");
.bread {
  box-sizing: border-box;
  margin: 25px;
}
.userAvatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 500px;
  height: 350px;
  padding: 0 50px;
  box-sizing: border-box;
  p {
    margin: 15px 0;
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
    background-color: black;
  }
  .avatarItem {
    button {
      margin: 0 25px;
    }
  }
  .avatar-uploader{
    display: inline-block;

  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: inline-block;
  }
}
</style>